<template>
  <div>
    <h2>电影详情页面 - {{ $route.query.id }}</h2>

    <p>电影的名字是：{{ film && film.name }}</p>
    <p>电影的海报：</p>
    <img width="100" height="100" :src="film && film.poster" alt="" />

    <h2>猜你喜欢</h2>
    <RouterLink :to="`/detail?id=6064`">请别相信她</RouterLink>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      film: null, // 详情数据
    };
  },
  watch: {
    // $route(newValue) {
    //   console.log("详情的 $route 变化了", newValue);
    //   // 再次调用fetchData
    //   this.fetchData();
    // },
  },
  methods: {
    async fetchData() {
      const { id } = this.$route.query;
      const response = await axios.get(
        `https://m.maizuo.com/gateway?filmId=${id}&k=1331422`,
        {
          headers: {
            "X-Host": "mall.film-ticket.film.info",
          },
        }
      );
      // 解构数据
      const {
        data: {
          status,
          msg,
          data: { film },
        },
      } = response;
      // 业务状态的判断
      if (status !== 0) {
        alert(msg);
        return;
      }
      // 将 film 赋值给 this.film
      this.film = film;
    },
  },
  created() {
    console.log("详情的 created");
    this.fetchData();
  },
  beforeRouteUpdate(to, from, next) {
    // to - 要去的路由
    // from - 从哪儿来的路由
    // next - 是一个函数，用于控制是否需要放行
    //        当没有调用时，表示要阻止导航（跳转）
    console.log("to", to);
    console.log("from", from);
    console.log("next", next);
    next();
    // 再次调用下接口
    this.fetchData();
  },
};
</script>
